<template>
	<view class="sticky-wrap uni-padding-wrap" v-if="list.length > 0">
		<view class="uni-flex sticky-item" v-for="(item, index) in list" :key="index" :data-id="item.topic.id" @tap="gotoTopicDetail">
			<view class="sticky-label">置顶</view>
			<view class="text-one-line">{{ item.topic.title_excerpt }}</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			propsList: {
				type: Array,
				default: () => {return []}
			}
		},
		data() {
			return {
				list: this.$props.propsList
			};
		},
		watch: {
			propsList (n, o) {
				this.list = n
			}
		},
		methods: {
			gotoTopicDetail(e) {
				let dataset = e.currentTarget.dataset
				uni.navigateTo({
					url: '/pages/topic-comment/topic-comment?tid=' + dataset.id
				})
			}
		}
	}
</script>

<style lang="scss">
.sticky-wrap {
	border-bottom: 10upx solid #eee;
	.sticky-item {
		padding: 10upx 0;
		flex-direction: row;
		align-items: center;
		.sticky-label {
			background-color: #eee;
			font-size: small;
			padding: 0 10upx;
			margin-right: 20upx;
		}
	}
	.sticky-item:not(:last-child) {
		border-bottom: 1upx solid #ddd;
	}
}
</style>
